import React from 'react'
import {withRouter} from 'react-router-dom'
import {connect} from 'react-redux'
import {Button, Card, Col, DatePicker, Form, Row, Select, Table} from 'antd'
import Screen from "../../../../components/Base/Screen";
import ContentWrap from "../../../../components/Base/ContentWrap";
import styles from './index.module.css';

const Option = Select.Option;
const {MonthPicker, RangePicker, WeekPicker} = DatePicker;
const dateFormat = 'YYYY/MM/DD';
const monthFormat = 'YYYY/MM';
const columns = [{
    title: '编号',
    dataIndex: 'SearchStatName',
    key: 'SearchStatName',
}, {
    title: '操作者',
    dataIndex: 'SearchStatResult',
    key: 'SearchStatResult',
}, {
    title: '操作日期',
    dataIndex: 'SearchStatAll',
    key: 'SearchStatAll',
}, {
    title: 'IP地址',
    dataIndex: 'SearchStatMonth',
    key: 'SearchStatMonth',
}, {
    title: '操作记录',
    dataIndex: 'SearchStatWeek',
    key: 'SearchStatWeek',
},];

const data = [{
    key: '1',
    SearchStatName: '1000001',
    SearchStatResult: 'admin',
    SearchStatAll: '2017-08-02 15:47:44',
    SearchStatMonth: '222.231.210.22',
    SearchStatWeek: '编辑后台用户账号：windir'
}, {
    key: '2',
    SearchStatName: '1000001',
    SearchStatResult: 'admin',
    SearchStatAll: '2017-08-02 15:47:44',
    SearchStatMonth: '222.231.210.22',
    SearchStatWeek: '编辑后台用户账号：windir'
}, {
    key: '3',
    SearchStatName: '1000001',
    SearchStatResult: 'admin',
    SearchStatAll: '2017-08-02 15:47:44',
    SearchStatMonth: '222.231.210.22',
    SearchStatWeek: '编辑后台用户账号：windir'
}];
const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: record => ({
        disabled: record.name === 'Disabled User', // Column configuration not to be checked
        name: record.name,
    }),
};

class OperaLog extends Screen {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <ContentWrap>
                <Card
                    style={{marginTop: '20px', marginBottom: '20px'}}
                >
                    <Row>
                        <Col xs={24} sm={24} md={24} xl={8} lg={24} className={styles.flexCol}>
                            <span>操作人员：</span>
                            <Select defaultValue="请选择" style={{width: '70%'}}>
                                <Option value="100">100</Option>
                                <Option value="1000">1000</Option>
                                <Option value="100000">100000</Option>
                            </Select>
                        </Col>
                        <Col xs={24} sm={24} md={24} xl={8} lg={24} className={styles.flexCol}>
                            <span>操作日期：</span>
                            <DatePicker style={{width: '70%'}}/>
                        </Col>
                    </Row>
                    <Row>
                        <Col xs={24} md={24}>
                            <Button>查询结果</Button>
                        </Col>
                    </Row>
                </Card>
                <Card title={'数据列表'}
                      extra={<div>
                          <span style={{marginRight: '10px'}}>清除日志:</span>
                          <Select defaultValue="选择清除的日期" style={{width: 150, marginRight: '10px'}}>
                              <Option value="一周之前">一周之前</Option>
                              <Option value="一个月之前">一个月之前</Option>
                              <Option value="三个月之前">三个月之前</Option>
                              <Option value="半年之前">半年之前</Option>
                              <Option value="一年之前">一年之前</Option>
                          </Select>
                          <Button style={{marginRight: '10px'}}>确定</Button>
                          <Select defaultValue="显示条数" style={{width: 120}}>
                              <Option value="1000">1000</Option>
                              <Option value="10000">10000</Option>
                          </Select></div>}>
                    <Table rowSelection={rowSelection} columns={columns} dataSource={data}
                           size={'middle'}
                           bordered={true}/>
                </Card>

            </ContentWrap>
        )
    }
}

export default withRouter(connect()(Form.create()(OperaLog)))

